<script lang="ts" setup>
import TabOne from './components/tabOne.vue'
import TabTwo from './components/tabTwo.vue'
import TabThree from './components/tabThree.vue'

const formRef = ref(ElForm);

const stateData = reactive({
  formData: {

  } as any,

  stepIndex: 0,
  stepList: [
    {
      name: '填写商品信息',
      component: TabOne
    },
    {
      name: '填写商品促销',
      component: TabTwo
    },
    {
      name: '填写商品属性',
      component: TabThree
    },
    {
      name: '选择商品关联'
    }
  ],
  rules: {
    mobile: [
      {
        required: true,
        message: '手机号码非法',
        trigger: 'blur',
        pattern: /^1\d{10}$/
      }
    ],
    nickName: [{ required: true, message: '请输入账号昵称', trigger: 'blur' }],
    email: [
      {
        required: true,
        message: '请输入联系邮箱',
        trigger: 'blur',
        pattern: /^\w+@\w+\.[a-z]+$/i
      }
    ]
  },
});
const { formData, rules, stepIndex, stepList } = toRefs(stateData);

function changeTab(val: any) {
  stepIndex.value = val
}

async function handleSubmit() {
  await formRef.value.validate((valid: boolean, val: any) => {
    if (valid) {
      updateUser(formData.value)
        .then(async (res) => {
          userStore.getInfo()
          ElMessage.success('更新成功');
        })
        .catch(() => { });
    } else {
      return false;
    }
  });
}
</script>

<template>
  <div class="app-container">
    <div class="detail-box">
      <div class="detail-form">
        <el-steps :active="stepIndex + 1" align-center>
          <el-step v-for="(item, index) in stepList" :title="item.name" :key="index" />
        </el-steps>
        <div class="form-innner">
          <component :is="stepList[stepIndex].component" @changeTab="changeTab"></component>
        </div>
      </div>
    </div>
  </div>
</template>
 
<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .detail-box {
    background: white;
    display: flex;
    justify-content: center;
    padding: 40px;

    .detail-form {
      width: 1200px;

      .form-innner {
        margin-top: 40px;
      }
    }
  }

}
</style>
  